<script setup>
import * as testApi from "@/api/testApi"
import { ref } from "vue";
import router from "@/router";
import QRCodeVue3 from "qr-code-generator-vue3";

const testListRef = ref([])
const totalRef = ref(0)

testApi.findByPage().then(({ code, data }) => {
  testListRef.value = data.data.map(item => {
    item.exam_url = `${import.meta.env.VITE_DOMIAN}/exam/${item.id}`
    return item
  })

  totalRef.value = data.total
})

function handleToExam(test) {
  const id = test.id
  router.push({ name: 'Exam', params: { id } })
}


</script>

<template>
  <div class="home-container">
    <div class="group">
      <div class="item" v-for="(test, index) in testListRef" :key="test.id">
        <h2>{{ test.title }}</h2>
        <div>
          <el-col :span="5"> 开始时间：</el-col>
          <el-col :span="11"> <el-date-picker value-format="x" disabled v-model="test.start_time" type="datetime"
              placeholder="Pick a date" style="width: 100%" /></el-col>
        </div>
        <div>
          <el-col :span="5"> 结束时间：</el-col>
          <el-col :span="11"> <el-date-picker value-format="x" disabled v-model="test.stop_time" type="datetime"
              placeholder="Pick a date" style="width: 100%" /></el-col>

        </div>
        <el-button type="danger" @click="handleToExam(test)">进入考试</el-button>
        <el-tooltip placement="top">
          <template #content>
            <QRCodeVue3 :value="test.exam_url" :width="300" :height="300" />
          </template>
          <el-button type="primary">
            手机考试<el-icon class="el-icon--right">
              <FullScreen />
            </el-icon>
          </el-button>
        </el-tooltip>

      </div>
    </div>


  </div>
</template>


<style lang="less" scoped>
.home-container {
  font-size: #000;

  .a {
    color: red;
  }
}

.group {
  display: flex;
}

.group .item {
  border: 1px solid #eee;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 10px;
  width: 33%;
  margin-right: 10px;

  >div {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
  }
}
</style>